<template>
  <div class="persondata">
    <!-- 标题 -->
    <div class="nav-text">账号设置</div>
    <el-divider />
    <!-- 主体 -->
    <div class="user-infos">
      <!-- 主要信息 -->
      <ul class="setting-list">
        <li class="item"><span class="title">账号认证</span>
          <div class="input-box"><span class="account empty">
              <el-tag class="ml-2" type="danger" v-if="!attestationFlag">未认证</el-tag>
              <el-tag class="ml-2" type="success" v-else>已认证</el-tag>
            </span>
            <div class="action-box"><button class="btn link-btn" @click="dialogVisible = true"><span>认证</span></button>
            </div>
          </div>
        </li>
        <li class="item"><span class="title">邮箱</span>
          <div class="input-box"><span class="account empty">
              {{ userinfo.email }}
            </span>
            <div class="action-box"><button class="btn link-btn"><span>修改</span></button></div>
          </div>
        </li>
        <li class="item"><span class="title">密码</span>
          <div class="input-box"><span class="account empty">
              ********
            </span>
            <div class="action-box"><button class="btn link-btn"><span>重置</span></button></div>
          </div>
        </li>
        <li class="item"><span class="title">余额</span>
          <div class="input-box"><span class="account empty">
              {{ money }} 币
            </span>
            <div class="action-box" @click="dialog = true"><button class="btn link-btn"><span>充值</span></button></div>
            <el-dialog v-model="dialog" title="充值" width="30%" :before-close="handleClose">
              <div style="padding: 20px 0;">
                温馨提示：<br/>1、本平台交易货币支持项目购买与委托发布功能的使用;<br/>2、充值金额 1 元，获得 1 币，以此类推。
              </div>
              <span>请输入充值金额:</span>
              <div style="padding-top: 10px;"></div>
              <el-input-number v-model="recharge" class="mx-4" :min="1" :max="9999" controls-position="right" />
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialog = false">取消</el-button>
                  <el-button type="primary" @click="rechargeFunc">
                    充值
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </li>
        <li class="item"><span class="title">账号注销</span>
          <div class="input-box"><span class="account"></span>
            <div class="action-box"><button class="btn link-btn"><span>注销</span></button></div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="账号认证" width="50%">
    <div class="attestation-div">
      <UploadImg :action="imgUrl"></UploadImg>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- <div>
    账号设置
    - 密码修改
    - 账号认证
  </div> -->
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import Service from "@/utils/axios"
import UploadImg from "./components/UploadImg/index.vue"
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";

const recharge = ref(0);
const money = ref(0);
const dialog = ref(false);
const userinfo = ref<any>({});
const userinfoFlag = ref(false);
const attestationFlag = ref(true);
// 获取用户信息方法
const getUserinfoFunc = async () => {
  const username = localStorage.getItem('username');
  console.log('获取当前用户信息', username);
  await Service.get(`/bkapi/userinfo/getUserinfoByUsername?username=${username}`)
    .then((res: any) => {
      console.log('data', res?.data);
      userinfo.value = { ...res?.data?.data };
      userinfoFlag.value = true;
      money.value = userinfo.value.money;
    })
}

// 账户认证弹出框
const dialogVisible = ref(false)
// 图片上传Url
const imgUrl = "/bkapi/api/uploadimgUserPic";

const handleClose = () => {
  dialog.value = false;
}

const rechargeFunc = () => {
  money.value = money.value + recharge.value;
  ElMessage({
    showClose: true,
    message: '充值成功!',
    type: 'success',
  })
}

onMounted(() => {
  // 获取用户信息方法
  getUserinfoFunc()
})
</script>

<style lang="less" scoped>
.persondata {
  .nav-text {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #333;
    margin-bottom: 20px;
  }

  .user-infos {
    padding: 0 50px;

    display: flex;

    .setting-list {

      .item {
        width: 800px;
        display: flex;
        align-items: center;

        padding: 30px 0;

        .title {
          font-size: 1rem;
          color: #333;
          width: 10rem;
        }

        .input-box {
          display: flex;
          align-items: center;
          flex: 1 1 auto;
          width: 100%;

          .account {
            flex: 1 1 auto;
            font-size: 1rem;
            color: #909090;
          }
        }

        .action-box {
          button {
            padding: 0;
            font-size: 0.8rem;
            color: #007fff;
            background-color: transparent;
            white-space: nowrap;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            color: #fff;
            border-radius: 2px;
            border: none;
            outline: none;
            transition: background-color .3s, color .3s;
            cursor: pointer;
            list-style: 1;

            span {
              font-size: 1rem;
              color: #007fff;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .avatar {
    padding: 40px;
  }
}
</style>